
<template>
  <div class="publicpageview">
    <div class="publicformview" v-if="isChanquan">
			<div class="headTop">
				<div class="xinxi">
					<el-button type="primary" size="mini"
					  >产权证件信息</el-button
					>
					<el-button style="background: #EFF2F7; color: #333333; border: none;" type="primary" size="mini" @click="handleAddUser(2)"
					  >房屋信息</el-button
					>
				</div>
				<el-button type="primary" size="mini" @click="returns"
				  >返回</el-button
				>
			</div>
      <el-form :rules='rules' :disabled='type==2' label-width='140px' :inline="true" :model="listQuery" size="mini" ref="addForm" style="margin-top: 20px;">
        <el-row :gutter="24">
					<el-col :span="6">
						<el-form-item label="区房屋管理单位：" prop="dname">
							<el-select :disabled='isluru' v-model="listQuery.dname" @change='areaChange' value-key="dname">
								<div v-for="(item,index) in areaList" :key="index">
									<el-option :label="item.dname" :value="item" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
						<el-form-item label="管理部(分中心)：" prop="aname">
							<el-select :disabled='isluru' v-model="listQuery.aname" @change='HouseChange' value-key="aname">
								<div v-for="(item,index) in HouseList" :key="index">
						
									<el-option :label="item.aname" :value="item" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
          <el-col :span="6">
            <el-form-item label="所号：" prop="blockno">
            <!--  <el-select v-model="listQuery.blockno">
              	<div v-for="(item,index) in blList" :key="index">
              		<el-option :label="item.blockno" :value="item.blockno" :key="index"></el-option>
              	</div>
              </el-select> -->
							<el-select v-model="listQuery.blockno" @change="blListChange" value-key="blockno">
								<div v-for="(item,index) in blList" :key="index">
									<el-option :label="item.blockno" :value="item" :key="index"></el-option>
								</div>
							</el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="房屋地址：" prop="address">
              <el-input v-model="listQuery.address"></el-input>
            </el-form-item>
          </el-col>
					<el-col :span="6">
					  <el-form-item label="土地证号：" prop="fieldidno">
					    <el-input v-model="listQuery.fieldidno"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="6">
					  <el-form-item label="房地(屋)产权证号：" prop="estateidno">
					    <el-input v-model="listQuery.estateidno"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="产别：" prop="ownway">
							<el-select clearable v-model="listQuery.ownway">
								<div v-for="(item,index) in chanbieList" :key="index">
									<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="性质：" prop="natureOwnership">
							<el-select clearable v-model="listQuery.natureOwnership">
							  <el-option label="国有" value="国有" key="1"></el-option>
							  <el-option label="集体" value="集体" key="0"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="土地用途：" prop="landUse">
						<el-select clearable v-model="listQuery.landUse">
							<div v-for="(item,index) in xingzhiList" :key="index">
								<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
							</div>
						</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
					  <el-form-item label="土地使用权类型：" prop="landUseType">
					    <el-input v-model="listQuery.landUseType"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="6">
					  <el-form-item label="占地面积：" prop="buildingarea">
					    <el-input v-model="listQuery.buildingarea"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="6">
					  <el-form-item label="使用面积：" prop="usingarea">
					    <el-input v-model="listQuery.usingarea"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="6">
					  <el-form-item label="院楼面积：" prop="ylarea">
					    <el-input v-model="listQuery.ylarea"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="6">
					  <el-form-item label="权属登记日期：" prop="registerDate">
							<el-date-picker
							      v-model="listQuery.registerDate"
							      type="date"
							      placeholder="年/月/日">
							    </el-date-picker>
					  </el-form-item>
					</el-col>
					<el-col :span="6">
					  <el-form-item label="证件移交日期：" prop="handDate">
							<el-date-picker
							      v-model="listQuery.handDate"
							      type="date"
							      placeholder="年/月/日">
							    </el-date-picker>
					  </el-form-item>
					</el-col>
					<el-col :span="6">
					  <el-form-item label="是否裁分：" prop="isSplit">
					    <el-select clearable v-model="listQuery.isSplit">
					      <el-option label="是" value="1" key="1"></el-option>
					      <el-option label="否" value="0" key="0"></el-option>
					    </el-select>
					  </el-form-item>
					</el-col>
					<el-col :span="6">
					  <el-form-item label="是否双证合一：" prop="isDoubleCert">
					    <el-select clearable v-model="listQuery.isDoubleCert">
					      <el-option label="是" value="1" key="1"></el-option>
					      <el-option label="否" value="0" key="0"></el-option>
					    </el-select>
					  </el-form-item>
					</el-col>
          <el-col :span="6">
            <el-form-item label="单证/双证：" prop="certCount">
              <el-input v-model="listQuery.certCount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="宗地号：" prop="fieldno">
              <el-input v-model="listQuery.fieldno"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证件编号：" prop="certNo">
              <el-input v-model="listQuery.certNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产权人：" prop="propertyPerson">
							<el-select clearable v-model="listQuery.propertyPerson">
								<div v-for="(item,index) in chanquanrenList" :key="index">
									<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
								</div>
							</el-select>
            </el-form-item>
          </el-col>
					<el-col :span="16">
					  <el-form-item label="上传文件：" prop="propertyPerson">
							<el-upload class="upload-demo" drag :action="uploadAction" :file-list="fileList" :on-success="handleUploadSuccess"
								:on-error="handleUploadError" :limit="1" :on-remove="handleFileRemove" :before-upload="beforeUpload" :multiple='false'>
								<i class="el-icon-upload"></i>
								<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							</el-upload>
					  </el-form-item>
					</el-col>
        </el-row>
      </el-form>
			
			<div class="bottomTop" v-if='type!=2'>
				<el-button type="primary" size="mini" @click="handleAddUser(2)"
				  >保存</el-button
				>
			</div>
    </div>
		
		<div class="publicformview" v-else>
			<div class="headTop">
				<div class="xinxi">
					<el-button style="background: #EFF2F7; color: #333333; border: none;" type="primary" size="mini" @click="handleAddUser(1)"
					  >产权证件信息</el-button
					>
					<el-button type="primary" size="mini"
					  >房屋信息</el-button
					>
				</div>
				<el-button type="primary" size="mini" @click="returns"
				  >返回</el-button
				>
			</div>
		  <el-form :disabled='type==2' label-width='140px' :inline="true" :model="listQuery" size="mini" ref="searchForm" style="margin-top: 20px;">
		    <el-row :gutter="24">
					<el-col :span="6">
						<el-form-item label="房屋结构：" prop="buildingStructure">
							<el-select clearable v-model="listQuery.buildingStructure">
								<div v-for="(item,index) in fangwujiegouList" :key="index">
									<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="房屋种类：" prop="houseType">
						 <el-select clearable v-model="listQuery.houseType">
						 	<div v-for="(item,index) in fangwuzhongleiList" :key="index">
						 		<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
						 	</div>
						 </el-select>
						</el-form-item>
					</el-col>
		      <el-col :span="6">
		        <el-form-item label="总层数：" prop="totalNumberFloors">
		          <el-input v-model="listQuery.totalNumberFloors"></el-input>
		        </el-form-item>
		      </el-col>
		      <el-col :span="6">
		        <el-form-item label="所在层：" prop="floorsNumber">
		          <el-input v-model="listQuery.floorsNumber"></el-input>
		        </el-form-item>
		      </el-col>
					<el-col :span="6">
					  <el-form-item label="间数：" prop="roomCount">
					    <el-input v-model="listQuery.roomCount"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="设计用途：" prop="designPurpose">
							<el-select clearable v-model="listQuery.designPurpose">
								<div v-for="(item,index) in yongtuList" :key="index">
									<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
					  <el-form-item label="住宅面积：" prop="residentialArea">
					    <el-input v-model="listQuery.residentialArea"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="6">
					  <el-form-item label="非住宅面积：" prop="residentialnotArea">
					    <el-input v-model="listQuery.residentialnotArea"></el-input>
					  </el-form-item>
					</el-col>
		    </el-row>
		  </el-form>
			<div class="bottomTop" v-if='type!=2'>
				<el-button type="primary" size="mini" @click="save"
				  >保存</el-button
				>
			</div>
		</div>
		
    
  </div>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		getArea,
		getHouseAdmin,
		addCertificate,
		blockList,
		updCertificate,
		certificateData,
		blockDetail
	} from '@/api/industry'
export default {
  name: "AccommodationManagementChanquanziliaoluru",
  data() {
    return {
      listQuery: {
				houseAdmin:"",
				areaUnit:'',
				blockno:'',
				address:'',
				fieldidno:'',
				estateidno:'',
				propertyPerson:'',
				certNo:'',
				ownway:'',
				natureOwnership:'',
				landUse:'',
				landUseType:'',
				buildingarea:'',
				usingarea:'',
				ylarea:'',
				registerDate:'',
				handDate:'',
				isSplit:'',
				isDoubleCert:'',
				certCount:'',
				fieldno:'',
				buildingStructure:'',
				houseType:'',
				totalNumberFloors:'',
				floorsNumber:'',
				roomCount:'',
				designPurpose:'',
				residentialArea:'',
				residentialnotArea:'',
				aname:'',
				dname:'',
				aid:'',
				did:'',
				pic:''
      },
			rules: {
				dname: [
					{ required: true, message: '请选择区房屋管理单位', trigger: 'blur' }
				],
				aname: [
					{ required: true, message: '请选择管理部(分中心)', trigger: 'blur' }
				],
				blockno: [
					{ required: true, message: '请选择所号', trigger: 'blur' }
				],
				certNo: [
					{ required: true, message: '请输入证件编号', trigger: 'blur' }
				]
			},
      total: 0,
      options: [{ key: "1" }],
      listLoading: false,
      dialogVisible: false,
			isChanquan:true,
			// 区房屋管理单位
			areaList: [],
			// 根据区获取部门
			HouseList: [],
			// 产别
			chanbieList:[],
			chanyeList:[],
			// 性质
			xingzhiList:[],
			fangwujiegouList:[],
			blList:[],
			type:'',
			id:'',
			chanquanrenList:[],
			fangwuzhongleiList:[],
			yongtuList:[],
			uploadAction: 'http://125.39.77.18:9021/mall-admin/fileUpload/upload',
				fileList: [],
        currentFileSrc: [],
				isluru:false
    };
  },

  computed: {
			
  },

  mounted() {
		if(localStorage.getItem('userHouseAdminId')>0){
				this.listQuery.did = localStorage.getItem('userDID')
				this.listQuery.dname = localStorage.getItem('userDname')
			this.listQuery.aname = localStorage.getItem('userHouseAdminName')
			this.listQuery.aid = localStorage.getItem('userHouseAdminId')
			
			this.isluru = true
		}
		
		if(this.$route.query.type){
			this.type = this.$route.query.type
			this.id = this.$route.query.id
			let data = {
				id:this.id
			}
			certificateData(data).then(res=>{
				this.listQuery = res.data
				this.fileList = JSON.parse(res.data.pic)
			})
		}
		// 遍历字典
		this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
		this.chanyeList.forEach((item,index)=>{
			if(item.classname == '产别'){
				item.classmidList.forEach((it,idx)=>{
					if(it.classmid=='产别'){
						this.chanbieList = it.classdetailList
					}
				})
			}else if(item.classname == '地段等级'){
					this.xingzhiList = item.classmidList
			}else if(item.classname == '房屋结构'){
					this.fangwujiegouList = item.classmidList
			}else if(item.classname=='产权人单位'){
					this.chanquanrenList = item.classmidList
			}else if(item.classname=='建筑形式'){
					this.fangwuzhongleiList = item.classmidList
			}else if(item.classname=='设计用途'){
					this.yongtuList = item.classmidList
			}
		})
		
			this.getArea()
			this.blockList()
  },

  methods: {
		blockList(){
			let data = {
				limit:99999,
				page:1
			}
			blockList(data).then(res=>{
			console.log(33)
				this.blList = res.data.list
			})
		},
		getArea() {
			getArea().then(res => {
				this.areaList = res.data
			})
		},
		getHouseAdmin(e) {
			getHouseAdmin({
				DID: e
			}).then(res => {
				this.HouseList = res.data
			})
		},
		// 选择区房屋管理
		areaChange(e) {
			console.log(e)
				this.listQuery.did = e.did
				this.listQuery.dname = e.dname
				this.getHouseAdmin(e.did)
		},
		// 根据区获取部门
		HouseChange(e) {
			console.log(e)
				this.listQuery.aname = e.aname
				this.listQuery.aid = e.aid
		},
		save(){
			let data = this.listQuery
			data.pic = JSON.stringify(this.fileList)
			data.registerDate = data.registerDate?dayjs(data.registerDate).format('YYYY-MM-DD HH:mm:ss'):''
			data.handDate = data.handDate?dayjs(data.handDate).format('YYYY-MM-DD HH:mm:ss'):''
			if(this.type==1){
				updCertificate(data).then(res=>{
					console.log(res)
					this.$message(res.message);
				})
			}else{
				addCertificate(data).then(res=>{
					console.log(res)
					this.$message(res.message);
				})
			}
			
		},
    resetForm(val) {
      console.log("1");
      this.$refs[val].resetFields();
    },
		handleAddUser(type){
			if(type==2){
				this.$refs.addForm.validate((valid) => {
				if (valid) {
					console.log(valid)
					this.isChanquan = type==1?true:false
				} else {
					console.log('验证失败！');
					return false;
					}
				}); 
			}else{
				this.isChanquan = type==1?true:false
			}
			
		},
		returns(){
			this.$router.go(-1)
		},
		// 上传成功
		handleUploadSuccess(response, file, fileList) {
			this.fileList = fileList
			if (response.code == 200) {
				this.$message.success('文件上传成功');
				this.currentFileSrc.push(response.data)
			
			} else {
				this.$message.error('文件上传失败');
				let arr = [...fileList.map(i => i)]
				arr.pop();
				this.fileList = arr;
		
			}
		},
		// 上传失败
		handleUploadError(err, file) {
			this.$message.error('文件上传失败');
		},
			// 文件选择变化
			handleFileRemove(file, fileList) {
				this.fileList = fileList;
				let arr = [...this.currentFileSrc];
				let i;
				arr.forEach((item, index) => {
					if (item.fileSize == file.size && item.name == file.name) {
						i = index
					}
				})
				arr.splice(i, 1);
				this.currentFileSrc = arr;
				console.log(this.currentFileSrc)

			},
			// 上传前验证
			beforeUpload(file) {
				const isExcel = file.type === 'application/vnd.ms-excel' ||
					file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
				// if (!isExcel) {
				//     this.$message.error('只能上传 Excel 文件！');
				//     return false;
				// }

				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传文件大小不能超过 2MB!');
					return false;
				}

				return true;
			},
			blListChange(e){
				console.log(e)
				this.listQuery.blockid = e.blockid
				this.listQuery.blockno = e.blockno
				// let data = {
				// 	BlockID:e.blockid
				// }
				// blockDetail(data).then(res=>{
				// 	console.log(res)
				// 	this.listQuery = res.data
				// 	})
			}
  },
};
</script>
<style scoped>
	.headTop{
		width: 100%;
		display: flex;
		justify-content: space-between;
		.xinxi{
			display: flex;
			width: 800px;
		}
	}
	.el-form-item{
		justify-content: start !important;
	}
	.el-select{
		width: 180px;
	}
	.el-input{
		width: 180px;
	}
	.el-date-picker{
		width: 180px;
	}
	.bottomTop{
		width: 100%;
		display: flex;
		justify-content: start;
	}
	/deep/.el-input__inner{
		width: 180px;
	}
</style>